<template>
  <div class="app-container">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>站点信息</span>
        <el-button style="float: right; padding: 3px 0" type="text" @click="handleClick">{{ editable?'保存':'编辑' }}</el-button>
      </div>
      <div>
        <div style="width:50%;margin:0 auto">
          <div class="avatar">
            <el-avatar :size="size" :src="siteInfo.avatar"></el-avatar>
          </div>
          <template v-if="editable">
            <span>站名：</span>
            <el-input v-model="siteInfo.name"></el-input>
            <span>域名：</span>
            <el-input v-model="siteInfo.domain"></el-input>
            <span>标语：</span>
            <el-input v-model="siteInfo.slogan"></el-input>
          </template>
          <template v-else>
            <p>站名：{{ siteInfo.name }}</p>
            <p>域名：
              <el-link :href="siteInfo.domain" target="_blank" :underline="false">{{ siteInfo.domain }}</el-link>
            </p>
            <p>标语：
              <el-tag>{{ siteInfo.slogan }}</el-tag>
            </p>
          </template>
          <p class="description">
            <span>简述：</span>
            <el-input type="textarea" :rows="4" :readonly="!editable" v-model="siteInfo.description"></el-input>
          </p>
          <p class="notice">
            <span>通知：</span>
            <el-input type="textarea" :rows="4" :readonly="!editable" v-model="siteInfo.notice"></el-input>
          </p>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
import { getSiteInfo, updateSiteInfo } from '@/api/site-info'

export default {
  data() {
    return {
      editable: false,
      size: 100,
      siteInfo: {
        name: '',
        domain: '',
        avatar: '',
        slogan: '',
        notice: '',
        description: '',
      }
    }
  },
  created() {
    this.getSiteInfo()
  },
  methods: {
    getSiteInfo() {
      getSiteInfo().then(res => {
        if (res.flag) this.siteInfo = res.data
      })
    },
    handleClick() {
      this.editable = !this.editable
      if(!this.editable) {
        updateSiteInfo(this.siteInfo).then(res => {
          if (res.flag) this.$notify.success('修改成功');
          this.getSiteInfo()
        }) 
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.el-textarea,
.el-input {
  width: 90%;
}
.el-input {
  margin: 5px 0;
}
.description,
.notice {
  display: flex;
}
.avatar {
  display: flex;
  justify-content: center;
}
</style>>
